<template>
	<view v-if="info.id">
		<view class="u-flex u-margin-30" style="color: #FFFFFF;position: relative">
			<view class="u-flex-1">
				<view class="u-flex u-row-between">
					<view>
						<view>您喜欢的装修风格是</view>
						<view style="font-size: 60rpx;margin: 40rpx 0;">{{info.name}}</view>
					</view>
					<image :src="info.cover" style="width:220rpx;height: 220rpx;"></image>
				</view>

				<view class="u-flex u-row-between u-margin-top-20">
				
						<view class="" @click="aginst">
							<text>再测试一次</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					
					<view>
						<view>喜欢度高达:<text style="font-size: 40rpx;">{{info.ratio}}%</text> </view>
					</view>

				</view>
			</view>




		</view>



		<view class=""
			style="padding: 30rpx;background: #fff;border-radius: 40rpx 40rpx  0 0rpx;width: 750rpx;">
			<view class="u-flex u-row-between u-margin-bottom-30">
				<view style="font-size: 40rpx;font-weight: bold;">偏爱色调</view>
				<view>
					<view class="color" v-for="(item,index) in info.color" :style="{background:item}">

					</view>
				</view>

			</view>
			<view style="font-size: 40rpx;font-weight: bold;margin-bottom: 20rpx;">代表元素</view>
			<view class="u-flex">
				<view v-for="(item,index) in info.element" class="sort u-margin-right-30">
					{{item}}
				</view>
			</view>



			<view style="font-size: 40rpx;font-weight: bold;margin: 20rpx 0;">其他推荐</view>
			<view>{{info.recommend}}</view>
			<view style="font-size: 40rpx;font-weight: bold;margin: 20rpx 0;">风格解析</view>
			<view>{{info.parse}}</view>
			
			<view style="font-size: 40rpx;font-weight: bold;margin: 20rpx 0;">详情</view>
			<view>
				<u-parse :html="info.detail"></u-parse>
			</view>
			


			<view class="" style="position: fixed;bottom: 50rpx;left: 150rpx;width: 500rpx;" >
				<u-button shape="circle" :custom-style="{background:'#FF5D39',color:'#fff'}" open-type="share">
					分享测试结果</u-button>
			</view>




		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				id:''
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.id = options.id
			}
		},
		onShow() {
			this.jiazai()
		},
		methods: {
			aginst(){
				uni.redirectTo({
					url:'/pages/styleTest/index'
				})
			},
			jiazai() {
				this.$u.post('/index/styleTest', {
					beta_id: this.id
				}).then(res => {
					this.info = res;
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(#6183FF, #88A1FF);
		
	}

	.kuang {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.kuang::after {
		content: '';
		position: absolute;
		width: 260rpx;
		height: 200rpx;
		right: 40rpx;
		z-index: 9;
		border: 10rpx solid #FFFFFF;
		bottom: 40rpx;

	}

	.color {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
		display: inline-block;
		margin-right: 20rpx;
	}

	.sort {
		padding: 7rpx 30rpx;
		border: 2rpx solid #6699CC;
		box-sizing: border-box;
		border-radius: 20rpx;
		color: #6699CC;
		text-align: center;
		display: table;
	}
</style>
